<template>
  <div class="items-config">
    <a-form-model :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
      <div class="form-title pdl-10">基础属性</div>
      <template>
        <a-form-model-item label="组件类型">
          <a-input :value="eleItem.name" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="字段名">
          <a-input v-model="eleItem.field" placeholder="请输入组件字段名"></a-input>
        </a-form-model-item>
        <a-form-model-item label="标题">
          <a-input v-model="eleItem.title" placeholder="请输入组件标题" :maxLength="10"></a-input>
        </a-form-model-item>
        <a-form-model-item label="显示标题">
          <a-switch v-model="eleItem.showTitle" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="必填">
          <a-switch v-model="eleItem.required" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="描述" v-if="eleItem.type !== 'text' && eleItem.type !== 'richText'">
          <a-input v-model="eleItem.desc" placeholder="请输入组件描述信息" :maxLength="100" type="textarea"></a-input>
        </a-form-model-item>
      </template>
      <div class="form-title pdl-10">特有属性</div>
      <!-- 输入框 -->
      <template v-if="eleItem.type === 'input'">
        <a-form-model-item label="默认值">
          <a-input v-model="eleItem.options.defaultValue" placeholder="请输入默认值"></a-input>
        </a-form-model-item>
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请输入占位提示"></a-input>
        </a-form-model-item>
        <a-form-model-item label="最大长度">
          <a-input-number v-model="eleItem.options.maxlength" :min="1" :precision="0" placeholder="请输入最大长度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="清除按钮">
          <a-switch v-model="eleItem.options.allowClear" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
      </template>
      <!-- 文本域 -->
      <template v-if="eleItem.type === 'textarea'">
        <a-form-model-item label="默认值">
          <a-input v-model="eleItem.options.defaultValue" placeholder="请输入默认值"></a-input>
        </a-form-model-item>
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请输入占位提示"></a-input>
        </a-form-model-item>
        <a-form-model-item label="最大长度">
          <a-input-number v-model="eleItem.options.maxlength" :min="1" :precision="0" placeholder="请输入最大长度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="自适应高度">
          <a-switch v-model="eleItem.options.autosize" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="清除按钮">
          <a-switch v-model="eleItem.options.allowClear" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
      </template>
      <!-- 计数器 -->
      <template v-if="eleItem.type === 'number'">
        <a-form-model-item label="默认值">
          <a-input-number v-model="eleItem.options.defaultValue" :min="eleItem.options.min" :precision="setDefault0(eleItem.options.precision)" :max="eleItem.options.max" placeholder="请输入默认值"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请输入占位提示"></a-input>
        </a-form-model-item>
        <a-form-model-item label="数值精度">
          <a-input-number v-model="eleItem.options.precision" :min="0" :precision="0" placeholder="请输入数值精度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="最小值">
          <a-input-number v-model="eleItem.options.min" :max="eleItem.options.max" :precision="0" placeholder="请输入最小值"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="最大值">
          <a-input-number v-model="eleItem.options.max" :min="eleItem.options.min" :precision="0" placeholder="请输入最大值"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="输入框宽度">
          <a-input-number v-model="eleItem.options.width" :min="1" :max="eleItem.options.unit == '%' ? 100 : undefined" placeholder="请输入框的宽度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="宽度单位">
          <a-select v-model="eleItem.options.unit" placeholder="请选择宽度单位">
            <a-select-option value="%">%</a-select-option>
            <a-select-option value="px">px</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 文本 -->
      <template v-if="eleItem.type === 'text'">
        <a-form-model-item label="默认值">
          <a-input v-model="eleItem.options.defaultValue" placeholder="请输入默认文本" type="textarea"></a-input>
        </a-form-model-item>
        <a-form-model-item label="对齐方式">
          <a-radio-group v-model="eleItem.options.layout">
            <a-radio value="left" class="vertical-radio">左对齐</a-radio>
            <a-radio value="center" class="vertical-radio">居中对齐</a-radio>
            <a-radio value="right" class="vertical-radio">右对齐</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="字体大小">
          <a-input-number v-model="eleItem.options.size" :min="0" :precision="0" placeholder="请输入字体大小"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="字体颜色">
          <color-picker v-model="eleItem.options.color" :position="{left: 0, bottom: '40px'}">
          </color-picker>
        </a-form-model-item>
        <a-form-model-item label="字重">
          <a-select v-model="eleItem.options.weight" placeholder="请选择字重">
            <a-select-option value="100">100</a-select-option>
            <a-select-option value="200">200</a-select-option>
            <a-select-option value="300">300</a-select-option>
            <a-select-option value="normal">默认</a-select-option>
            <a-select-option value="500">500</a-select-option>
            <a-select-option value="600">600</a-select-option>
            <a-select-option value="bold">粗</a-select-option>
            <a-select-option value="800">800</a-select-option>
            <a-select-option value="900">900</a-select-option>
            <a-select-option value="lighter">细</a-select-option>
            <a-select-option value="bolder">加粗</a-select-option>
            <a-select-option value="inherit">继承</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="行高">
          <a-input-number v-model="eleItem.options.lineHeight" :min="0" placeholder="请输入行高"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="上边距">
          <a-input-number v-model="eleItem.options.topPadding" placeholder="请输入上边距"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="左边距">
          <a-input-number v-model="eleItem.options.leftPadding" placeholder="请输入左边距"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="右边距">
          <a-input-number v-model="eleItem.options.rightPadding" placeholder="请输入右边距"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="首行缩进">
          <a-input-number v-model="eleItem.options.indent" :min="0" :precision="0" placeholder="请输入首行缩进"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="字体样式">
          <a-select v-model="eleItem.options.style" placeholder="请选择字体样式">
            <a-select-option value="">默认</a-select-option>
            <a-select-option value="italic">斜体</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 时间选择器 -->
      <template v-if="eleItem.type === 'timePicker'">
        <a-form-model-item label="默认值">
          <a-time-picker :use12-hours="eleItem.options.hour12" v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" placeholder="请选择默认值" allowClear />
        </a-form-model-item>
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请输入占位提示"></a-input>
        </a-form-model-item>
        <a-form-model-item label="12小时制">
          <a-switch v-model="eleItem.options.hour12" @change="changeTime" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="格式">
          <a-select v-model="eleItem.options.format" placeholder="请选择时间格式">
            <template v-if="eleItem.options.hour12">
              <a-select-option value="h:mm:ss a">小时:分钟:秒钟</a-select-option>
              <a-select-option value="h:mm a">小时:分钟</a-select-option>
              <a-select-option value="mm:ss a">分钟:秒钟</a-select-option>
            </template>
            <template v-else>
              <a-select-option value="HH:mm:ss">小时:分钟:秒钟</a-select-option>
              <a-select-option value="HH:mm">小时:分钟</a-select-option>
              <a-select-option value="mm:ss">分钟:秒钟</a-select-option>
            </template>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="小时间隔">
          <a-input-number v-model="eleItem.options.hourStep" :min="1" :max="24" placeholder="请输入小时间隔"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="分钟间隔">
          <a-input-number v-model="eleItem.options.minuteStep" :min="1" :max="59" placeholder="请输入分钟间隔"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="秒钟间隔">
          <a-input-number v-model="eleItem.options.secondStep" :min="1" :max="59" placeholder="请输入秒钟间隔"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="禁选">
          <a-switch v-model="eleItem.options.disabled" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="禁选小时">
          <a-input v-model="eleItem.options.disabledHours" placeholder="多个小时段请以逗号分割"></a-input>
        </a-form-model-item>
        <a-form-model-item label="禁选分钟">
          <a-input v-model="eleItem.options.disabledMinutes" placeholder="多个分钟时段请以逗号分割"></a-input>
        </a-form-model-item>
        <a-form-model-item label="禁选秒钟">
          <a-input v-model="eleItem.options.disabledSeconds" placeholder="多个秒钟时段请以逗号分割"></a-input>
        </a-form-model-item>
        <a-form-model-item label="隐藏禁选项">
          <a-switch v-model="eleItem.options.hideDisabledOptions" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="清除按钮">
          <a-switch v-model="eleItem.options.allowClear" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="输入框宽度">
          <a-input-number v-model="eleItem.options.width" :min="1" :max="eleItem.options.unit == '%' ? 100 : undefined" placeholder="请输入框的宽度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="宽度单位">
          <a-select v-model="eleItem.options.unit" placeholder="请选择宽度单位">
            <a-select-option value="%">%</a-select-option>
            <a-select-option value="px">px</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 时间范围选择器 -->
      <template v-if="eleItem.type === 'timeRangePicker'">
        <a-form-model-item label="默认值">
          <TimeRange v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="['开始时间','结束时间']" :configs="eleItem.options.configs" />
        </a-form-model-item>
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请以逗号分割"></a-input>
        </a-form-model-item>
        <a-form-model-item label="12小时制">
          <a-switch v-model="eleItem.options.configs['use12-hours']" @change="changeTime" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="分隔符">
          <a-input v-model="eleItem.options.separator" placeholder="请输入分隔符"></a-input>
        </a-form-model-item>
        <a-form-model-item label="格式">
          <a-select v-model="eleItem.options.format" placeholder="请选择时间格式">
            <template v-if="eleItem.options.configs['use12-hours']">
              <a-select-option value="h:mm:ss a">小时:分钟:秒钟</a-select-option>
              <a-select-option value="h:mm a">小时:分钟</a-select-option>
              <a-select-option value="mm:ss a">分钟:秒钟</a-select-option>
            </template>
            <template v-else>
              <a-select-option value="HH:mm:ss">小时:分钟:秒钟</a-select-option>
              <a-select-option value="HH:mm">小时:分钟</a-select-option>
              <a-select-option value="mm:ss">分钟:秒钟</a-select-option>
            </template>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="小时间隔">
          <a-input-number v-model="eleItem.options.configs.hoursStep" :min="1" :max="24" placeholder="请输入小时间隔"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="分钟间隔">
          <a-input-number v-model="eleItem.options.configs.minutesStep" :min="1" :max="59" placeholder="请输入分钟间隔"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="秒钟间隔">
          <a-input-number v-model="eleItem.options.configs.secondsStep" :min="1" :max="59" placeholder="请输入秒钟间隔"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="禁选">
          <a-switch v-model="eleItem.options.configs.disabled" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="禁选小时">
          <a-input v-model="eleItem.options.configs.disabledHours" placeholder="多个小时段请以逗号分割"></a-input>
        </a-form-model-item>
        <a-form-model-item label="禁选分钟">
          <a-input v-model="eleItem.options.configs.disabledMinutes" placeholder="多个分钟时段请以逗号分割"></a-input>
        </a-form-model-item>
        <a-form-model-item label="禁选秒钟">
          <a-input v-model="eleItem.options.configs.disabledSeconds" placeholder="多个秒钟时段请以逗号分割"></a-input>
        </a-form-model-item>
        <a-form-model-item label="显示小时列">
          <a-switch v-model="eleItem.options.configs.hasHours" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="显示分钟列">
          <a-switch v-model="eleItem.options.configs.hasMinutes" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="显示秒钟列">
          <a-switch v-model="eleItem.options.configs.hasSeconds" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="显示此刻">
          <a-switch v-model="eleItem.options.configs.showNow" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="清除按钮">
          <a-switch v-model="eleItem.options.configs.allowClear" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="输入框宽度">
          <a-input-number v-model="eleItem.options.width" :min="1" :max="eleItem.options.unit == '%' ? 100 : undefined" placeholder="请输入框的宽度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="宽度单位">
          <a-select v-model="eleItem.options.unit" placeholder="请选择宽度单位">
            <a-select-option value="%">%</a-select-option>
            <a-select-option value="px">px</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 日期选择器 -->
      <template v-if="eleItem.type === 'datePicker'">
        <a-form-model-item label="默认值">
          <a-date-picker v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" placeholder="请选择默认值" allowClear />
        </a-form-model-item>
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请输入占位提示"></a-input>
        </a-form-model-item>
        <a-form-model-item label="格式">
          <a-select v-model="eleItem.options.format" placeholder="请选择日期格式">
            <a-select-option value="YYYY-MM-DD">年-月-日</a-select-option>
            <a-select-option value="YYYY/MM/DD">年/月/日</a-select-option>
            <a-select-option value="YYYY-MM">年-月</a-select-option>
            <a-select-option value="YYYY/MM">年/月</a-select-option>
            <a-select-option value="YYYY">年</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选范围类型">
          <a-select v-model="eleItem.options.dateRangeType" @change="changeDateRangeType" placeholder="请选择可选范围类型">
            <a-select-option value="">无</a-select-option>
            <a-select-option value="before">只能选过去日期</a-select-option>
            <a-select-option value="after">只能选将来日期</a-select-option>
            <a-select-option value="diy">自定义范围</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选范围" v-if="eleItem.options.dateRangeType == 'diy'">
          <a-range-picker v-model="eleItem.options.dateRange" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="['开始日期', '结束日期']" allowClear />
        </a-form-model-item>
        <a-form-model-item label="禁选">
          <a-switch v-model="eleItem.options.disabled" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="清除按钮">
          <a-switch v-model="eleItem.options.allowClear" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="输入框宽度">
          <a-input-number v-model="eleItem.options.width" :min="1" :max="eleItem.options.unit == '%' ? 100 : undefined" placeholder="请输入框的宽度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="宽度单位">
          <a-select v-model="eleItem.options.unit" placeholder="请选择宽度单位">
            <a-select-option value="%">%</a-select-option>
            <a-select-option value="px">px</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 日期范围选择器 -->
      <template v-if="eleItem.type === 'dateRangePicker'">
        <a-form-model-item label="默认值">
          <a-range-picker v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="['开始日期', '结束日期']" allowClear />
        </a-form-model-item>
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请以逗号分割"></a-input>
        </a-form-model-item>
        <a-form-model-item label="格式">
          <a-select v-model="eleItem.options.format" placeholder="请选择日期格式">
            <a-select-option value="YYYY-MM-DD">年-月-日</a-select-option>
            <a-select-option value="YYYY/MM/DD">年/月/日</a-select-option>
            <a-select-option value="YYYY-MM">年-月</a-select-option>
            <a-select-option value="YYYY/MM">年/月</a-select-option>
            <a-select-option value="YYYY">年</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选范围类型">
          <a-select v-model="eleItem.options.dateRangeType" @change="changeDateRangeType" placeholder="请选择可选范围类型">
            <a-select-option value="">无</a-select-option>
            <a-select-option value="before">只能选过去日期</a-select-option>
            <a-select-option value="after">只能选将来日期</a-select-option>
            <a-select-option value="diy">自定义范围</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选范围" v-if="eleItem.options.dateRangeType == 'diy'">
          <a-range-picker v-model="eleItem.options.dateRange" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="['开始日期', '结束日期']" allowClear />
        </a-form-model-item>
        <a-form-model-item label="分隔符">
          <a-input v-model="eleItem.options.separator" placeholder="请输入分隔符"></a-input>
        </a-form-model-item>
        <a-form-model-item label="禁选">
          <a-switch v-model="eleItem.options.disabled" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="清除按钮">
          <a-switch v-model="eleItem.options.allowClear" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="输入框宽度">
          <a-input-number v-model="eleItem.options.width" :min="1" :max="eleItem.options.unit == '%' ? 100 : undefined" placeholder="请输入框的宽度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="宽度单位">
          <a-select v-model="eleItem.options.unit" placeholder="请选择宽度单位">
            <a-select-option value="%">%</a-select-option>
            <a-select-option value="px">px</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 日期时间选择器 -->
      <template v-if="eleItem.type === 'dateTimePicker'">
        <a-form-model-item label="默认值">
          <a-date-picker :show-time="{ format: eleItem.options.format.split(' ')[1] }" v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" placeholder="请选择默认值" allowClear />
        </a-form-model-item>
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请输入占位提示"></a-input>
        </a-form-model-item>
        <a-form-model-item label="格式">
          <a-select v-model="eleItem.options.format" placeholder="请选择日期时间格式">
            <a-select-option value="YYYY-MM-DD HH:mm:ss">年-月-日 时:分:秒</a-select-option>
            <a-select-option value="YYYY/MM/DD HH:mm:ss">年/月/日 时:分:秒</a-select-option>
            <a-select-option value="YYYY-MM-DD HH:mm">年-月-日 时:分</a-select-option>
            <a-select-option value="YYYY/MM/DD HH:mm">年/月/日 时:分</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选范围类型">
          <a-select v-model="eleItem.options.dateRangeType" @change="changeDateRangeType" placeholder="请选择可选范围类型">
            <a-select-option value="">无</a-select-option>
            <a-select-option value="before">只能选过去日期</a-select-option>
            <a-select-option value="after">只能选将来日期</a-select-option>
            <a-select-option value="diy">自定义范围</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选范围" v-if="eleItem.options.dateRangeType == 'diy'">
          <a-range-picker v-model="eleItem.options.dateRange" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="['开始日期', '结束日期']" allowClear />
        </a-form-model-item>
        <a-form-model-item label="禁选">
          <a-switch v-model="eleItem.options.disabled" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="清除按钮">
          <a-switch v-model="eleItem.options.allowClear" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="输入框宽度">
          <a-input-number v-model="eleItem.options.width" :min="1" :max="eleItem.options.unit == '%' ? 100 : undefined" placeholder="请输入框的宽度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="宽度单位">
          <a-select v-model="eleItem.options.unit" placeholder="请选择宽度单位">
            <a-select-option value="%">%</a-select-option>
            <a-select-option value="px">px</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 日期时间范围选择器 -->
      <template v-if="eleItem.type === 'dateTimeRangePicker'">
        <a-form-model-item label="默认值" :wrapperCol="{ span: 23, offset: 1 }">
          <a-range-picker style="width: 100%" :show-time="{ format: eleItem.options.format.split(' ')[1] }" v-model="eleItem.options.defaultValue" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="['开始日期', '结束日期']" allowClear />
        </a-form-model-item>
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请以逗号分割"></a-input>
        </a-form-model-item>
        <a-form-model-item label="格式">
          <a-select v-model="eleItem.options.format" placeholder="请选择日期时间格式">
            <a-select-option value="YYYY-MM-DD HH:mm:ss">年-月-日 时:分:秒</a-select-option>
            <a-select-option value="YYYY/MM/DD HH:mm:ss">年/月/日 时:分:秒</a-select-option>
            <a-select-option value="YYYY-MM-DD HH:mm">年-月-日 时:分</a-select-option>
            <a-select-option value="YYYY/MM/DD HH:mm">年/月/日 时:分</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选范围类型">
          <a-select v-model="eleItem.options.dateRangeType" @change="changeDateRangeType" placeholder="请选择可选范围类型">
            <a-select-option value="">无</a-select-option>
            <a-select-option value="before">只能选过去日期</a-select-option>
            <a-select-option value="after">只能选将来日期</a-select-option>
            <a-select-option value="diy">自定义范围</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="可选范围" v-if="eleItem.options.dateRangeType == 'diy'">
          <a-range-picker v-model="eleItem.options.dateRange" :format="eleItem.options.format" :valueFormat="eleItem.options.format" :placeholder="['开始日期', '结束日期']" allowClear />
        </a-form-model-item>
        <a-form-model-item label="分隔符">
          <a-input v-model="eleItem.options.separator" placeholder="请输入分隔符"></a-input>
        </a-form-model-item>
        <a-form-model-item label="禁选">
          <a-switch v-model="eleItem.options.disabled" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="清除按钮">
          <a-switch v-model="eleItem.options.allowClear" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="输入框宽度">
          <a-input-number v-model="eleItem.options.width" :min="1" :max="eleItem.options.unit == '%' ? 100 : undefined" placeholder="请输入框的宽度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="宽度单位">
          <a-select v-model="eleItem.options.unit" placeholder="请选择宽度单位">
            <a-select-option value="%">%</a-select-option>
            <a-select-option value="px">px</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 单选框组 | 复选框组 -->
      <template v-if="eleItem.type === 'radio' || eleItem.type === 'checkbox'">
        <a-form-model-item label="显示选项值">
          <a-switch v-model="eleItem.options.showValue" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="选项组" :wrapperCol="
            eleItem.options.showValue ? { span: 23, offset: 1 } : { span: 17 }
          ">
          <template v-if="eleItem.type === 'radio'">
            <a-radio-group v-model="eleItem.options.defaultValue">
              <draggable v-model="eleItem.options.options" animation="300" handle=".remove">
                <a-col v-for="(item, index) in eleItem.options.options" :key="index" :class="{
                    'pdb-10': index !== eleItem.options.options.length - 1,
                  }">
                  <a-space>
                    <a-tooltip :title="
                        eleItem.options.defaultValue === item.value
                          ? '取消选中'
                          : '默认选中'
                      ">
                      <a-radio :value="item.value" @click="radioChange"></a-radio>
                    </a-tooltip>
                    <a-tooltip title="选项值">
                      <a-input v-if="eleItem.options.showValue" v-model="item.value" placeholder="选项值"></a-input>
                    </a-tooltip>
                    <a-tooltip title="选项名">
                      <a-input v-model="item.label" placeholder="选项名"></a-input>
                    </a-tooltip>
                    <a-tooltip title="移动">
                      <a-icon type="drag" class="remove" />
                    </a-tooltip>
                    <a-tooltip title="删除">
                      <a-icon type="delete" @click="delOption(index)" />
                    </a-tooltip>
                  </a-space>
                </a-col>
              </draggable>
              <div class="flex justify-content-center">
                <a-button type="link" @click="add">添加选项</a-button>
                <a-button type="link" @click="addMultip">批量添加</a-button>
              </div>
            </a-radio-group>
          </template>
          <template v-if="eleItem.type === 'checkbox'">
            <a-checkbox-group v-model="eleItem.options.defaultValue">
              <draggable v-model="eleItem.options.options" animation="300" handle=".remove">
                <a-col v-for="(item, index) in eleItem.options.options" :key="index" :class="{
                    'pdb-10': index !== eleItem.options.options.length - 1,
                  }">
                  <a-space>
                    <a-tooltip :title="
                        eleItem.options.defaultValue.includes(item.value)
                          ? '取消选中'
                          : '默认选中'
                      ">
                      <a-checkbox :value="item.value"></a-checkbox>
                    </a-tooltip>
                    <a-tooltip title="选项值">
                      <a-input v-if="eleItem.options.showValue" v-model="item.value" placeholder="选项值"></a-input>
                    </a-tooltip>
                    <a-tooltip title="选项名">
                      <a-input v-model="item.label" placeholder="选项名"></a-input>
                    </a-tooltip>
                    <a-tooltip title="移动">
                      <a-icon type="drag" class="remove" />
                    </a-tooltip>
                    <a-tooltip title="删除">
                      <a-icon type="delete" @click="delOption(index)" />
                    </a-tooltip>
                  </a-space>
                </a-col>
              </draggable>
              <div class="flex justify-content-center">
                <a-button type="link" @click="add">添加选项</a-button>
                <a-button type="link" @click="addMultip">批量添加</a-button>
              </div>
            </a-checkbox-group>
          </template>
        </a-form-model-item>
        <a-form-model-item label="排布方式">
          <a-select v-model="eleItem.options.layout" placeholder="请选择排布方式">
            <a-select-option value="">水平</a-select-option>
            <a-select-option value="vertical">垂直</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 下拉框 -->
      <template v-if="eleItem.type === 'select'">
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请输入占位提示"></a-input>
        </a-form-model-item>
        <a-form-model-item label="无数据提示">
          <a-input v-model="eleItem.options.notFoundContent" placeholder="请输入无数据提示"></a-input>
        </a-form-model-item>
        <a-form-model-item label="多选">
          <a-switch v-model="eleItem.options.multip" checked-children="是" un-checked-children="否" @change="
              (e) => {
                eleItem.options.defaultValue = e ? [] : undefined;
              }
            " />
        </a-form-model-item>
        <a-form-model-item label="显示选项值">
          <a-switch v-model="eleItem.options.showValue" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="选项组" :wrapperCol="
            eleItem.options.showValue ? { span: 23, offset: 1 } : { span: 17 }
          ">
          <template v-if="eleItem.options.multip">
            <a-checkbox-group v-model="eleItem.options.defaultValue">
              <draggable v-model="eleItem.options.options" animation="300" handle=".remove">
                <a-col v-for="(item, index) in eleItem.options.options" :key="index" :class="{
                    'pdb-10': index !== eleItem.options.options.length - 1,
                  }">
                  <a-space>
                    <a-tooltip :title="
                        eleItem.options.defaultValue.includes(item.value)
                          ? '取消选中'
                          : '默认选中'
                      ">
                      <a-checkbox :value="item.value"></a-checkbox>
                    </a-tooltip>
                    <a-tooltip title="选项值">
                      <a-input v-if="eleItem.options.showValue" v-model="item.value" placeholder="选项值"></a-input>
                    </a-tooltip>
                    <a-tooltip title="选项名">
                      <a-input v-model="item.label" placeholder="选项名"></a-input>
                    </a-tooltip>
                    <a-tooltip title="移动">
                      <a-icon type="drag" class="remove" />
                    </a-tooltip>
                    <a-tooltip title="删除">
                      <a-icon type="delete" @click="delOption(index)" />
                    </a-tooltip>
                  </a-space>
                </a-col>
              </draggable>
              <div class="flex justify-content-center">
                <a-button type="link" @click="add">添加选项</a-button>
                <a-button type="link" @click="addMultip">批量添加</a-button>
              </div>
            </a-checkbox-group>
          </template>
          <template v-else>
            <a-radio-group v-model="eleItem.options.defaultValue">
              <draggable v-model="eleItem.options.options" animation="300" handle=".remove">
                <a-col v-for="(item, index) in eleItem.options.options" :key="index" :class="{
                    'pdb-10': index !== eleItem.options.options.length - 1,
                  }">
                  <a-space>
                    <a-tooltip :title="
                        eleItem.options.defaultValue === item.value
                          ? '取消选中'
                          : '默认选中'
                      ">
                      <a-radio :value="item.value" @click="radioChange"></a-radio>
                    </a-tooltip>
                    <a-tooltip title="选项值">
                      <a-input v-if="eleItem.options.showValue" v-model="item.value" placeholder="选项值"></a-input>
                    </a-tooltip>
                    <a-tooltip title="选项名">
                      <a-input v-model="item.label" placeholder="选项名"></a-input>
                    </a-tooltip>
                    <a-tooltip title="移动">
                      <a-icon type="drag" class="remove" />
                    </a-tooltip>
                    <a-tooltip title="删除">
                      <a-icon type="delete" @click="delOption(index)" />
                    </a-tooltip>
                  </a-space>
                </a-col>
              </draggable>
              <div class="flex justify-content-center">
                <a-button type="link" @click="add">添加选项</a-button>
                <a-button type="link" @click="addMultip">批量添加</a-button>
              </div>
            </a-radio-group>
          </template>
        </a-form-model-item>
        <a-form-model-item label="可搜索" v-if="!eleItem.options.multip">
          <a-switch v-model="eleItem.options.showSearch" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="下拉箭头">
          <a-switch v-model="eleItem.options.showArrow" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="清除按钮">
          <a-switch v-model="eleItem.options.allowClear" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="输入框宽度">
          <a-input-number v-model="eleItem.options.width" :min="1" :max="eleItem.options.unit == '%' ? 100 : undefined" placeholder="请输入框的宽度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="宽度单位">
          <a-select v-model="eleItem.options.unit" placeholder="请选择宽度单位">
            <a-select-option value="%">%</a-select-option>
            <a-select-option value="px">px</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 层级选择器 -->
      <template v-if="eleItem.type === 'cascader'">
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请输入占位提示"></a-input>
        </a-form-model-item>
        <a-form-model-item label="选项设置">
          <a-button type="link" @click="open">
            <a-icon type="form" />编辑
          </a-button>
        </a-form-model-item>
        <a-form-model-item label="默认值">
          <a-cascader v-model="eleItem.options.defaultValue" :options="eleItem.options.options" placeholder="请选择默认值" />
        </a-form-model-item>
      </template>
      <!-- 评分 -->
      <template v-if="eleItem.type === 'rate'">
        <a-form-model-item label="总数">
          <a-input-number v-model="eleItem.options.count" :min="1" placeholder="请输入总数"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="默认值">
          <a-input-number v-model="eleItem.options.defaultValue" :min="0" placeholder="请输入默认值"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="展示文案">
          <a-switch v-model="eleItem.options.text" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="半选">
          <a-switch v-model="eleItem.options.allowHalf" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="自定义字符">
          <a-switch v-model="eleItem.options.diy" checked-children="是" un-checked-children="否" @change="
              (e) => {
                eleItem.options.character = e ? '' : 'star';
              }
            " />
        </a-form-model-item>
        <a-form-model-item label="字符">
          <a-select v-if="!eleItem.options.diy" v-model="eleItem.options.character" placeholder="请选择字符">
            <a-select-option value="star">默认</a-select-option>
            <a-select-option value="smile">
              <a-icon type="smile" />
            </a-select-option>
            <a-select-option value="meh">
              <a-icon type="meh" />
            </a-select-option>
            <a-select-option value="frown">
              <a-icon type="frown" />
            </a-select-option>
            <a-select-option value="heart">
              <a-icon type="heart" />
            </a-select-option>
            <a-select-option value="check-circle">
              <a-icon type="check-circle" />
            </a-select-option>
            <a-select-option value="fire">
              <a-icon type="fire" />
            </a-select-option>
            <a-select-option value="gift">
              <a-icon type="gift" />
            </a-select-option>
            <a-select-option value="setting">
              <a-icon type="setting" />
            </a-select-option>
          </a-select>
          <a-input v-else v-model="eleItem.options.character" placeholder="请输入自定义字符"></a-input>
        </a-form-model-item>
        <a-form-model-item label="风格">
          <a-select v-model="eleItem.options.theme" placeholder="请选择字符风格">
            <a-select-option value="filled">实心</a-select-option>
            <a-select-option value="outlined">空心</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="颜色">
          <color-picker v-model="eleItem.options.color" :position="{left: 0, bottom: '40px'}">
          </color-picker>
        </a-form-model-item>
        <a-form-model-item label="提示信息">
          <a-input v-model="eleItem.options.tooltips" placeholder="请输入提示信息（以逗号分割）"></a-input>
        </a-form-model-item>
        <a-form-model-item label="点击清除">
          <a-switch v-model="eleItem.options.allowClear" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
      </template>
      <!-- 分割线 -->
      <template v-if="eleItem.type === 'divider'">
        <a-form-model-item label="显示文字">
          <a-switch v-model="eleItem.options.showText" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="文字" v-if="eleItem.options.showText">
          <a-input v-model="eleItem.options.text" placeholder="请输入文字"></a-input>
        </a-form-model-item>
        <a-form-model-item label="文字位置" v-if="eleItem.options.showText">
          <a-select v-model="eleItem.options.position" placeholder="请选择字符风格">
            <a-select-option value="left">居左</a-select-option>
            <a-select-option value="center">居中</a-select-option>
            <a-select-option value="right">居右</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="颜色">
          <color-picker v-model="eleItem.options.color" :position="{left: 0, bottom: '40px'}">
          </color-picker>
        </a-form-model-item>
        <a-form-model-item label="宽度">
          <a-input-number v-model="eleItem.options.height" :min="1" placeholder="请输入宽度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="长度">
          <a-input-number v-model="eleItem.options.width" :min="1" :max="eleItem.options.unit == '%' ? 100 : undefined" placeholder="请输入框的宽度"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="长度单位">
          <a-select v-model="eleItem.options.unit" placeholder="请选择长度单位">
            <a-select-option value="%">%</a-select-option>
            <a-select-option value="px">px</a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <!-- 滑块 -->
      <template v-if="eleItem.type === 'slider'">
        <a-form-model-item label="禁用">
          <a-switch v-model="eleItem.options.disabled" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="最小值">
          <a-input-number v-model="eleItem.options.min" @change="changeValue('min', 0)" placeholder="请输入最小值"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="最大值">
          <a-input-number v-model="eleItem.options.max" @change="changeValue('max', 100)" placeholder="请输入最小值"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="反向">
          <a-switch v-model="eleItem.options.reverse" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="单点">
          <a-switch v-model="eleItem.options.included" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="步长">
          <a-input-number v-model="eleItem.options.step" @change="changeValue('step', 1)" placeholder="请输入步长"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="默认值">
          <a-input-number v-model="eleItem.options.defaultValue" placeholder="请输入默认值" @change="changeValue('defaultValue', 0)" :min="eleItem.options.min" :max="eleItem.options.max"></a-input-number>
        </a-form-model-item>
      </template>
      <!-- 图文显示 -->
      <template v-if="eleItem.type === 'richText'">
        <a-form-model-item label=" " :colon="false" :label-col="{ span: 4 }">
          <a-button type="link" @click="openRichDialog">
            <a-icon type="form" />编辑图文
          </a-button>
        </a-form-model-item>
      </template>
      <!-- 地址 -->
      <template v-if="eleItem.type === 'address'">
        <a-form-model-item label="占位提示">
          <a-input v-model="eleItem.options.placeholder" placeholder="请输入占位提示"></a-input>
        </a-form-model-item>
        <a-form-model-item label="格式">
          <a-select v-model="eleItem.options.format" placeholder="请选择地址格式">
            <a-select-option value="1">省-市-区</a-select-option>
            <a-select-option value="2">省-市-区-详细地址</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="默认值">
          <a-switch v-model="eleItem.options.hasDefaultValue" @change="(e) => {eleItem.options.defaultValue = '';eleItem.options.detail = '';}" checked-children="自定义" un-checked-children="无" />
          <a-cascader v-if="eleItem.options.hasDefaultValue" v-model="eleItem.options.defaultValue" :options="address" placeholder="请选择省-市-区" />
          <a-input v-if="eleItem.options.hasDefaultValue && eleItem.options.format == 2" v-model="eleItem.options.detail" placeholder="请输入详细地址"></a-input>
        </a-form-model-item>
        <a-form-model-item label="禁用">
          <a-switch v-model="eleItem.options.disabled" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
      </template>
      <!-- 附件上传 -->
      <template v-if="eleItem.type === 'fileUpload'">
        <a-form-model-item label="附件格式">
          <div>
            <a-checkbox @change="changeFormat" v-model="eleItem.options.format">限定附件格式</a-checkbox>
          </div>
          <div v-for="(item,index) in eleItem.options.fileType" :key="index" class="file-type">
            <a-input v-model="eleItem.options.fileType[index]" placeholder="请输入附件格式"></a-input>
            <div class="imgs">
              <img :src="require('@/assets/file-add.svg')" @click="eleItem.options.fileType.push('')" alt="新增" />
              <img :src="require('@/assets/file-minus.svg')" @click="delFileType(index)" alt="删除">
            </div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="数量">
          <a-input-number v-model="eleItem.options.maxCount" @change="changeValue('maxCount', 100)" placeholder="请输入最大上传数量"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="上传地址">
          <a-input v-model="eleItem.options.action" placeholder="请输入上传地址"></a-input>
        </a-form-model-item>
        <a-form-model-item label="提示">
          <a-switch v-model="eleItem.options.hasTip" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
        <a-form-model-item label="禁用">
          <a-switch v-model="eleItem.options.disabled" checked-children="是" un-checked-children="否" />
        </a-form-model-item>
      </template>
      <div class="form-title pdl-10">规则</div>
    </a-form-model>
    <a-modal title="批量添加选项" v-model="visible" @ok="handleOk">
      <div class="modal">
        <div class="title">
          每行代表一个选项，可以添加多个选项<span>(已自动过滤重复项)</span>。
        </div>
        <a-input v-model="options" :autoSize="{ minRows: 3, maxRows: 17 }" type="textarea" placeholder="请输入内容（若有值，则值和名以逗号间隔，如：value，label）"></a-input>
      </div>
    </a-modal>
    <a-modal title="图文编辑" width="50%" v-model="visibleRich" @cancel="cancelRich" @ok="handleOkRich">
      <div>
          <QuillEditor v-model="richText" />
      </div>
    </a-modal>
    <CascaderDialog ref="CascaderDialog" @confirm="confirm" />
  </div>
</template>
<script>
import CascaderDialog from './cascaderDialog.vue'
import { address } from '../../address'
export default {
  name: 'itemsConfig',
  components: {
    CascaderDialog
  },
  props: ['eleItem'],
  computed: {},
  data() {
    return {
      // 选项设置
      visibleCasc: false,
      // 选项设置选项组
      optionsCasc: [],
      // 批量添加弹框
      visible: false,
      // 批量添加选项组
      options: '',
      // 编辑图文弹框
      visibleRich: false,
      // 图文内容
      richText: '',
      // 地址
      address
    }
  },
  watch: {
    eleItem: {
      handler(data) {
        this.$emit('update:eleItem', data)
      },
      deep: true
    },
  },
  methods: {
    // 输入框值改变时
    changeValue(e, defaultValue) {
      let value = this.eleItem.options[e]
      if (!value || value == '' || value == null) {
        this.eleItem.options[e] = defaultValue
      }
    },
    // 打开选项设置弹框
    open() {
      let data = JSON.parse(JSON.stringify(this.eleItem.options.options))
      this.$refs.CascaderDialog.show(data)
    },
    // 选项设置弹框
    confirm(data) {
      this.eleItem.options.options = JSON.parse(JSON.stringify(data))
    },
    // 小时制更改时同步调整格式默认值
    changeTime(checked) {
      this.eleItem.options.format = checked ? 'h:mm:ss a' : 'HH:mm:ss'
    },
    // 打开图文编辑弹框
    openRichDialog() {
      this.richText = this.eleItem.options.content
      this.visibleRich = true
    },
    // 确定编辑图文内容
    handleOkRich() {
      this.eleItem.options.content = this.richText
      this.visibleRich = false
      this.richText = ''
    },
    cancelRich() {
      this.visibleRich = false
      this.richText = ''
    },
    // 可选范围类型改变同步修改可选范围的值
    changeDateRangeType() {
      this.eleItem.options.dateRange = []
    },
    // 单选框组取消选中
    radioChange(e) {
      if (e.target.value === this.eleItem.options.defaultValue) {
        this.eleItem.options.defaultValue = ''
      }
    },
    // 添加选项
    add() {
      // 随机生成4位数防止报key重复错误
      let random = Math.floor(Math.random() * 9999)
      this.eleItem.options.options.push({
        value: '选项' + random,
        label: '选项' + random
      })
    },
    // 批量添加
    addMultip() {
      this.visible = true
      this.options = ''
    },
    // 确认批量添加
    handleOk() {
      if (!this.options) {
        this.$message.warning('请输入内容')
        return
      }
      let reg = /(\s*)(.+)(\s*)/g
      let values = []
      this.options.replace(reg, (...args) => {
        values.push(args[2])
      })
      values = [...new Set(values)]
      values.forEach((item) => {
        let data = /,|，/.test(item) ? item.split(/,|，/) : item
        this.eleItem.options.options.push({
          value: Array.isArray(data) ? data[0] : item,
          label: Array.isArray(data) ? data[1] : item
        })
      })
      this.visible = false
    },
    // 删除选项组数据
    delOption(index) {
      this.eleItem.options.options.splice(index, 1)
    },
    // 限制上传文件格式
    changeFormat(e) {
      e.target.checked
        ? this.eleItem.options.fileType.push('')
        : (this.eleItem.options.fileType = [])
    },
    // 删除新增的附件格式
    delFileType(index) {
      this.eleItem.options.fileType.splice(index, 1)
      this.eleItem.options.format = this.eleItem.options.fileType.length > 0
    },
    // 默认为0
    setDefault0(data) {
      let num = 0
      if (data) {
        num = data
      }
      return num
    }
  }
}
</script>
<style lang="less" scoped>
.modal {
  .title {
    margin-bottom: 10px;
    span {
      color: #999999;
      font-size: 10px;
    }
  }
}
.items-config {
  .form-title {
    color: #333;
    line-height: 30px;
    height: 30px;
    font-weight: bold;
    font-size: 15px;
  }
  /deep/.ant-input-number,
  /deep/.ant-time-picker {
    width: 100%;
  }
  /deep/.time-range{
      width: 100%;
  }
  .vertical-radio {
    display: block;
    line-height: 30px;
    height: 30px;
  }
  .file-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    &:nth-child(2) {
      margin: 0;
    }
    .imgs {
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        &:first-child {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>
